<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Extra-Map-App</title>
    <!--<link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">-->
    <link rel="stylesheet" href="http://127.0.0.1/arcgis_js_api/library/4.4/esri/css/main.css">
    <link rel="stylesheet" href="css/mainApp.css">
    <script src="../dist/config.js"></script>
    <!--<script src="https://js.arcgis.com/4.4/"></script>-->
    <script src="http://127.0.0.1/arcgis_js_api/library/4.4/init.js"></script>
    <script>
        // Load the Map and MapView modules
        require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/layers/ElevationLayer",
            "dojo/on",
            "dextra/modules/toolbars/Draw","dextra/modules/measure/_measureDistance3D","dextra/modules/measure/_measureArea3D",
            "dojo/domReady!"], function(Map, SceneView,ElevationLayer,domOn,Draw,_measureDistance,_measureArea) {
            var elevLyr = new ElevationLayer({
                // Custom elevation service
                url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Elevation/MtBaldy_Elevation/ImageServer"
            });

            // Create a Map instance
            var myMap = new Map({
                basemap:"topo",
                ground: "world-elevation"
            });
            //myMap.ground.layers.add(elevLyr);

            var view = new SceneView({
                container:"viewDiv",
                map: myMap
            });

            var drawTool=new Draw({
                view:view
            });

            var distance=new _measureDistance({
                view:view
            });

            var area=new _measureArea({
                view:view
            });

            drawTool.on("draw-complete",function(evt){
                console.log(evt);
            });

            domOn(dojo.byId("drawbutton1"),"click",function(evt){
                drawTool.activate("point");
            });

            domOn(dojo.byId("drawbutton2"),"click",function(evt){
                drawTool.activate("polyline3D");
            });

            domOn(dojo.byId("drawbutton3"),"click",function(evt){
                drawTool.activate("polygon");
            });

            domOn(dojo.byId("drawbutton4"),"click",function(evt){
                drawTool.activate("circle");
            });

            domOn(dojo.byId("drawbutton5"),"click",function(evt){
                distance.start();
            });
            domOn(dojo.byId("drawbutton6"),"click",function(evt){
                area.start();
            });

        });
    </script>

</head>
<body>
<button id="drawbutton1">点</button>
<button id="drawbutton2">线</button>
<button id="drawbutton3">面</button>
<button id="drawbutton4">圆</button>
<button id="drawbutton5">距离</button>
<button id="drawbutton6">面积</button>
<div id="viewDiv"></div>
</body>
</html>